
window.$cpDom={
	add:(dom,name)=>{

	// 复制节点（只复制节点本身，不复制子节点）
	const clonedNode = dom.cloneNode(true);
	clonedNode.classList.remove(clonedNode.className)
	clonedNode.style.display='flex'
	
	clonedNode.classList.add(name)
	return clonedNode
},
remove:(name)=>{
	document.querySelector(name).remove()
}
}

document.write(`<div class="ppt-more1">
					<div data-type='top'><span class="icon-last" ></span><span>在上方添加一页</span></div>
					<div data-type='bottom'><span class="icon-next"></span><span>在下方添加一页</span></div>
					<hr style="width:125px; opacity: .3; "/>
					<div data-type='del'><span class="icon-trash" ></span><span>删除此项</span></div>
				</div>`)
				
				// 弹窗显示点击事件
		document.querySelectorAll('.icon-more').forEach(function(item){
				item.addEventListener('click',function(){
				 	if(this.parentNode.parentNode.querySelector('.ppt-more-page')){
						$cpDom.remove('.ppt-more-page')
					}else{  
						const liDom=this.parentNode.parentNode
						const	isType=liDom.dataset.type==='item'
						mui('.icon-last')[0].style.backgroundImage=`url("../../image/${isType?'Group-bottom':'last'}.svg")`
						mui('.icon-next')[0].style.backgroundImage=`url("../../image/${isType?'Group-top':'next'}.svg")`
						mui('.icon-last~span')[0].innerText=`在上方添加一${isType?'项':'页'}`
						mui('.icon-next~span')[0].innerText=`在下方添加一${isType?'项':'页'}`
						// 复用更多弹窗
						const cpdom=$cpDom.add(mui('.ppt-more1')[0],'ppt-more-page')
						cpdom.style.display='flex'
						liDom.appendChild(cpdom)	
						// 添加在上下方添加一页或者一项的点击事件
						 mui('.ppt-more-page').on('click','div',()=>{
							 console.log(mui('.ppt-prompt~ul')[0].children)
							 Array.from(mui('.ppt-prompt~ul')[0].children).forEach((item,index)=>{
								 // 找到当前所修改的li的位置
								 console.log(item.isEqualNode(this.parentNode.parentNode),index)
								 
							 })
						 })
					}  
						
				}) 
			})
			
			
			
		// 在上下方添加一页或者一项
		function addmore(type,tORb){
			
		}
		
		